<template>
  <div class="search">
    <div class="search-top">
      <div class="search-input-box">
        <input type="text" placeholder="请输入要搜索的关键词" v-model="keywords">
      </div>
      <div class="search-btn"@click="search">确定</div>
    </div>
    <div class="search-content">
      <div class="search-user" v-if="searchData.vip_list.length > 0">
        <div class="search-user-title">用户</div>
        <div class="search-user-content">
          <div class="search-user-list" v-for="(item,index) in searchData.vip_list" :key="index">
            <div class="search-user-img"><img :src="item.photo_url"></div>
            <div class="search-user-name">{{item.realname}}</div>
          </div>
        </div>
      </div>
      <div class="search-enterprise" v-if="searchData.company_list.length > 0">
        <div class="search-enterprise-title">企业</div>
        <div class="search-enterprise-content">
          <div class="search-enterprise-list" v-for="(item,index) in searchData.company_list" :key="index">
            <div class="search-enterprise-name">{{item.name}}</div>
            <div class="search-enterprise-tag">
              <div class="enterprise-tag-list">{{item.label_name}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="search-goods" v-if="searchData.goods_list.length > 0">
        <div class="search-goods-title">商品</div>
        <div class="search-goods-content">
          <div class="search-goods-list" v-for="(item,index) in searchData.goods_list" :key="index">
            <div class="search-goods-img"><img :src="item.thumb_Url"></div>
            <div class="search-goods-name">{{item.name}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      keywords: '',
      searchData: {
        vip_list:[],
        company_list:[],
        goods_list:[],
      },
    }
  },
  onShow(){
    this.searchData = {
      vip_list:[],
      company_list:[],
      goods_list:[],
    }
  },
  mounted(){
    this.keywords = '';
  },
  methods: {
    async search(){
      if(this.keywords == ""){
          wx.showToast({
            title: '请输入内容',
            icon: 'none',
            duration: 2000
          })
        }else{
        // var userToken = wx.getStorageSync('userToken');
        let params = {
          // user_token: userToken,
          keywords: this.keywords,
        };
        let res = await this.$api.getSearch(params);
        if(res.data.level == "success"){
         let vip_list = res.data.data.vip_list.slice(0,3);
         let company_list = res.data.data.company_list.slice(0,5);
         let goods_list = res.data.data.goods_list.slice(0,3);
         let obj = {
           vip_list,
           company_list,
           goods_list
         };
         this.searchData = obj;
        }else{
          wx.showToast({
            title: '搜索失败',
            icon: 'none',
            duration: 2000
          })
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .search{
    .search-top{
      width: 100%;
      padding:20rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      background-color: #fff;
      .search-input-box{
        background-color: #f1f1f1;
        height: 70rpx;
        flex: 4;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-left: 80rpx;
        border-radius: 10rpx;
        background-image: url(../../../../static/images/search.png);
        background-size: 60rpx 60rpx;
        background-repeat: no-repeat;
        background-position: 10rpx center;
      }
      input{
        width: 100%;
      }
      .search-btn{
        flex: 1;
        text-align: center;
        line-height: 68rpx;
        height: 68rpx;
        background-color: #606266;
        color: #fff;
        border-radius: 10rpx;
        margin-left: 20rpx;
      }
    }
    .search-content{
      padding: 0 20rpx;
      background-color: #fff;
      .search-user{
        .search-user-title{
          height: 70rpx;
          line-height: 70rpx;
          font-size: 32rpx;
        }
        .search-user-content{
          display: flex;
          justify-content: space-between;
          align-items: center;
          .search-user-list{
            width: 30%;
            .search-user-img{
              width: 100%;
              height: 120rpx;
              img{
                 width: 100%;
                 height: 100%;
              }
            }
            .search-user-name{
              height: 40rpx;
              line-height: 40rpx;
              text-align: center;
              font-size: 28rpx;
            }
          }
        }
      }
      .search-enterprise{
        .search-enterprise-title{
          height: 70rpx;
          line-height: 70rpx;
          font-size: 32rpx;
        }
        .search-enterprise-content{
          font-size: 28rpx;
          .search-enterprise-list{
            display: flex;
            align-items: center;
            margin-top: 12rpx;
            .search-enterprise-name{
              width: 1000rpx;
            }
            .search-enterprise-tag{
              width: 500rpx;
              display: flex;
              justify-content: center;
              align-items: center;
              .enterprise-tag-list{
                padding: 10rpx;
                background-color:rgb(245, 221, 10);
                color: #fff;
                border-radius: 4px;
              }
            }
          }
        }
      }
      .search-goods{
        .search-goods-title{
          height: 70rpx;
          line-height: 70rpx;
          font-size: 32rpx;
        }
        .search-goods-content{
          display: flex;
          justify-content: space-between;
          align-items: center;
          .search-goods-list{
            width: 30%;
            .search-goods-img{
              width: 100%;
              height: 120rpx;
              img{
                 width: 100%;
                 height: 100%;
              }
            }
            .search-goods-name{
              height: 40rpx;
              line-height: 40rpx;
              text-align: center;
              font-size: 28rpx;
            }
          }
        }
      }
    }
  }
</style>